<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="{{ static_url('bootstrap-3.3.7-dist/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ static_url('css/talk_room_style.css') }}">
</head>
<body>
<div class="container-fluid">
    <div class="row title">
{#     #}
        <b>当前用户:</b><span id="username">{{ current_user }}</span>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3 body-content" id="main-talk-window">
            <div class="row small_hand" id="main-talk-title">
                <div class="text-center">多人聊天室</div>
            </div>
            <div class="row">
                <!--聊天框左侧-->
                <div class="col-md-9">
                    <!--聊天内容-->
                    <div class="row" id="talk-content">
                    </div>
                    <!--聊天输入框-->
                    <div class="row" id="talk-input">
                        <div class="col-md-10 text-style">
                            <textarea class="form-control" rows="3" id="input-content"></textarea>
                        </div>
                        <div class="col-md-2 text-style">
                            {# a标签加上href="javascript:;"，什么都不执行，不会发get请求  #}
                            <button href="javascript:" onclick="sendMsg()" class="btn btn-success" id="send-btn">
                                发送
                            </button>
                        </div>
                    </div>
                </div>
                <!--成员列表-->
                <div class="col-md-3 " id="talk-list">
                    <!--当前的人数及人员-->
                    <div class="row" id="now_person">
                        <div><b>在线人数：</b><span id="user_number"></span></div>
                        <div id="show_user">
                        </div>
                    </div>
                    <!--和我聊天的人-->
                    <div class="row" id="talk_with_me">
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4 hidden" id="single-person-talk-window">
            <div class="row small_hand" id="single-person-talk-title">
                <div class="text-center">和<span id="single-person-talk-name">...</span>聊天
                    <button type="button" class="close" aria-label="Close" id="single-person-talk-close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
            </div>
            <div class="row" style="margin: 0 0;">
                <!--聊天内容-->
                <div class="row" id="single-person-talk-content">
                </div>
                <!--聊天输入框-->
                <div class="row" id="single-person-talk-input">
                    <div class="col-md-10 text-style">
                        <textarea class="form-control text-style" rows="3" id="single-person-input-content"></textarea>
                    </div>
                    <div class="col-md-2 text-style">
                        <button class="btn btn-success" id="single-person-send-btn">
                            发送
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="contents" style="height:500px;overflow:auto;"></div>
<div>

</div>

<script src="{{ static_url('js/jquery-3.4.1.js') }}"></script>
<script src="{{ static_url('js/jquery.cookie.js') }}"></script>
<script src="{{ static_url('js/talk_room_js.js') }}"></script>

<script type="text/javascript">

    function sendMsg() {
        var input_content = $("#input-content");
        var msg = input_content.val();
        ws.send(msg);
        input_content.val("");
    }

    var ws = new WebSocket("ws://127.0.0.1:8002/chat");
    ws.onmessage = function(e) {
        $("#talk-content").append("<p>" + e.data + "</p>");
    };

</script>


{#<script>#}
{#    var message_num;#}
{#    var single_message_num;#}
{#    var now_user = "{{ request.user }}";#}
{#    // 和那个单人用户聊天#}
{#    var talk_username;#}
{#    // 按标志打开单人聊天窗口#}
{#    // 当标志为True时候，不可以切换窗口#}
{#    var open_single_window_flag = false;#}
{##}
{#    // 所有用户和我聊天的数#}
{#    // 服务器发来的字典存着用户和我聊天的长度，和我这个字典的key减，当大于0表示有新消息#}
{#    var talk_with_me_num = {}#}
{##}
{#</script>#}
{##}
{##}
{#<script>#}
{##}
{#    setInterval(function () {#}
{#        if (!message_num) {#}
{#            message_num = 0#}
{#        }#}
{#        var data = {"{{ request.user }}": message_num};#}
{#        $.ajax({#}
{#            url: "{% url 'send_message' %}",#}
{#            type: "get",#}
{#            data: data,#}
{#            success: function (ret) {#}
                {#console.log(ret);#}
{#                message_num = ret.pop();#}
{#                for (var i = 0; i < ret.length; i++) {#}
{#                    if (ret[i]["user"] === now_user) {#}
{#                        show_my_message(ret[i]["message"]);#}
{#                    } else {#}
{#                        show_other_message(ret[i]);#}
{#                    }#}
{#                }#}
{#                pull_down();#}
{#            }#}
{#        });#}
{#    }, 1000);#}
{##}
{#    function get_talk_list() {#}
        {#console.log("666");#}
{#        $.ajax({#}
{#            url: "{% url 'send_user' %}",#}
{#            type: "get",#}
{#            success: function (ret) {#}
{#                $('#user_number').text(Object.keys(ret).length);#}
{#                clear_talk_list();#}
{#                for (var key in ret) {#}
{#                    if (!talk_with_me_num.hasOwnProperty(key)) {#}
{#                        talk_with_me_num[key] = 0;#}
                        {#console.log(talk_with_me_num);#}
{#                    }#}
{#                    $('#show_user').append(`<div class="user_show">${key}</div>`);#}
{#                }#}
{#            }#}
{#        })#}
{#    }#}
{##}
{#    get_talk_list();#}
{#    setInterval(get_talk_list, 5000);#}
{##}
{#    $('#send-btn').click(#}
{#        function () {#}
{#            var content = $('#input-content').val().trim();#}
{#            if (content !== "") {#}
{#                if (message_num) {#}
{#                    show_my_message(content);#}
{#                }#}
{#                pull_down();#}
{#                var data = {"{{ request.user }}": content};#}
{#                $.ajax({#}
{#                    url: "{% url 'accept_message' %}",#}
{#                    type: "post",#}
{#                    data: data,#}
{#                    headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
{#                    success: function (ret) {#}
                        {#console.log(ret);#}
{#                    }#}
{#                })#}
{#            }#}
{#            // 不管消息是否发送，点击完成后清空输入框消息#}
{#            clear_my_input();#}
{#        }#}
{#    );#}
{##}
{#    // 浏览器关闭发送请求，删除user#}
{#    window.onbeforeunload = function () {#}
{#        $.ajax({#}
{#            url: "{% url 'close_browser' %}",#}
{#            type: "get",#}
{#            data: {'user': now_user},#}
{#        });#}
{#    };#}
{##}
{#    function single_message_len() {#}
{#        $.ajax({#}
{#            url: "{% url 'send_single_message_len' %}",#}
{#            type: "get",#}
{#            data: {#}
{#                "self": now_user,#}
{#            },#}
{#            success: function (ret) {#}
                {#console.log(ret);#}
{#                clear_talk_with_me();#}
{##}
{#                for (key in ret) {#}
{#                    var user = key;#}
{#                    var num = ret[key] - talk_with_me_num[key];#}
{#                    if (num) {#}
{#                        $('#talk_with_me').append(`<div class="small_hand user_show">#}
{#                            <span class="talk_name">${user}</span>#}
{#                            <span class="have_message">${num}</span>#}
{#                        </div>`);#}
{#                    }#}
{#                }#}
{#            }#}
{#        });#}
{#    }#}
{##}
{#    setInterval(single_message_len, 3000);#}
{##}
{#    function single_message_send_task() {#}
{#        if (!single_message_num) {#}
{#            single_message_num = 0#}
{#        }#}
{#        $.ajax({#}
{#            url: "{% url 'send_single_message' %}",#}
{#            type: "get",#}
{#            data: {#}
{#                "self": now_user,#}
{#                "he": talk_username,#}
{#                "single_message_num": single_message_num,#}
{#            },#}
{#            success: function (ret) {#}
{#                single_message_num = ret.pop();#}
{##}
{#                // 和我聊天的消息重置#}
{#                talk_with_me_num[talk_username] = single_message_num;#}
                {#console.log(talk_with_me_num);#}
                {#console.log(ret);#}
{#                for (var i = 0; i < ret.length; i++) {#}
{#                    if (ret[i]["user"] === now_user) {#}
{#                        show_single_my_message(ret[i]["message"])#}
{#                    } else {#}
{#                        show_single_other_message(ret[i])#}
{#                    }#}
{#                }#}
{#                single_pull_down();#}
{#            }#}
{#        });#}
{#    }#}
{##}
{#    $('#single-person-send-btn').click(#}
{#        function () {#}
{#            var content = $('#single-person-input-content').val().trim();#}
{#            if (content !== "") {#}
{#                if (single_message_num) {#}
{#                    show_single_my_message(content);#}
{#                }#}
{#                single_pull_down();#}
{##}
{#                // 自己的消息自加#}
{#                talk_with_me_num[talk_username]++;#}
{##}
{#                $.ajax({#}
{#                    url: '{% url "accept_single_message" %}',#}
{#                    type: "post",#}
{#                    data: {#}
{#                        "self": now_user,#}
{#                        "who_talk_with": talk_username,#}
{#                        "content": content,#}
{#                    },#}
{#                    headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
{#                    success: function (ret) {#}
                        {#console.log("11 ",ret);#}
{#                    }#}
{#                });#}
{#            }#}
{#            // 不管消息是否发送，点击完成后清空输入框消息#}
{#            clear_single_person_input();#}
{#        }#}
{#    );#}
{#</script>#}

</body>
</html>